/** === MENU ==== */

/* Style Controller */

.menu .hr {
	/* devided line style */
	border-bottom: 1px solid #666;
}
.menu li:hover {
	/* bgcolor of <li> which selected */
	box-shadow: inset 0 0 10px #666;
	background: #555;
	z-index: 2;
}
.menu li:hover:after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	height: 8px;
	top:100%;
	width: 100%;
/*	background: rgba(255,255,255,0.4)*/
}
.menu .sub:before {
	/* style of <li> which have sub menu */
	content: "\25E3";
	position: absolute;
	left: 9px
}
.menu .main {
	/* menu fonts */
	font-weight: normal;
	font-size: 12px;
}
/* Layout Controller */

@keyframes fadeIn {
	from {
		opacity: 0.3;
	}
	to {
		opacity: 1;
	}
}
.menu {
	position: relative;
	z-index: 10;
	white-space: nowrap;
}
.menu li {
	list-style: none outside none;
	position: relative;
	background: #444;
	padding: 5px 20px;
	line-height: 20px;
	height: 20px;
	color: #fff;
	min-width: 4em;
	cursor: default;
}
.menu ul {
	position: absolute;
	margin: 0;
	top: -30px;
	margin-right: -20px;
	/* fix buffer offset */
	right: 100%;
	padding: 30px 20px 60px 40px;
	/* buffer area */
/*	background: rgba(255,255,255,0.4);*/
}
.menu ul.main {
	right: 0;
	top: 100%;
	margin-top: -30px;
	/* fix buffer offset */
}
/* Display Controller */

.menu ul {
	display: none;
	position: absolute;
}
.sub:hover > ul,
.menu:hover > ul {
	display: block;
	animation: fadeIn 0.2s;
}